<template>
    <view class="content">
        <view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':showFunBtn}">
            <!-- 背景图- 定位方式 -->
            <!-- <image class="content-box-bg" :src="user_info.chatBgImg" :style="{ height: imgHeight }"></image> -->
            <!-- <view class="content-box-loading" v-if="!loading"><u-loading mode="flower"></u-loading></view> -->
            <view class="message" v-for="(item, index) in messageList" :key="index" :id="`msg-${item.hasBeenSentId}`">
                <!--我的-->
                <view class="message-item" :class="item.mine ? 'right' : 'left'">
                    <view>
                        <view style="font-size: 10px" :class="item.mine ? 'right' : 'left'">{{item.mine ?item.date:item.name}} {{!item.mine ?item.date:item.name}}</view>
                    </view>
                </view>


                <view class="message-item " :class="item.mine ? 'right' : 'left'">

						<view><image class="img" :src="item.img" mode=""></image></view>

						<!-- contentType = 1 文本 -->

						<!-- contentType = 2 语音 去除-->
						<view class="content contentType2" :class="[{ 'content-type-right': item.mine }]" v-if="item.contentType == 2" @tap="handleAudio(item)"
						     hover-class="contentType2-hover-class" :style="{width:`${130+(item.contentDuration*2)}rpx`}" >
						    <view class="voice_icon"
						        :class="[
						            { voice_icon_right: item.mine },
						            { voice_icon_left: !item.mine },
						            { voice_icon_right_an: item.anmitionPlay && item.mine },
						            { voice_icon_left_an: item.anmitionPlay && !item.mine } ]" ></view>
						    <view class="">{{ item.content.contentDuration }}''</view>
						</view>
						<!-- contentType = 3 图片 -->
						<view  class="content contentType3" v-if="item.contentType == 3" @tap="viewImg([item.content])" >
						    <img :src="item.content" class="img" mode="widthFix"></img>
						</view>

						<view class="content" v-if="item.contentType == 1">
                            <!--你的-->
						    <!--<view class="message-item " :class="item.mine ? 'right' : 'left'">{{item.name}}{{item.date}}</view>-->
						    <u-parse :html="item.content"></u-parse>
						</view>


                </view>
            </view>

        </view>

        <!-- 底部聊天输入框 -->
        <view class="input-box2" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			
            <view class="voice" @click="isVoice = !isVoice">
                <u-icon name="/static/chat/voice.png" size="48" v-show="!isVoice"></u-icon>
                <u-icon name="/static/keyboard_icon_01.png" size="48" v-show="isVoice"></u-icon>
            </view>
			<!-- #ifndef H5 -->
			<!-- #endif -->
            <view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="startVoice" @touchmove.stop.prevent="moveVoice" @touchend="endVoice" @touchcancel="cancelVoice">{{voiceIconText}}</view>
                <view class="text-mode" :class="[!isVoice?'':'hidden']">
                    <view class="box">
                        <editor id="editor" class="ql-container" placeholder=" " :show-img-size="true" @ready="onEditorReady"></editor>
                        <!-- <textarea auto-height="true" v-model="formData.content" @focus="textareaFocus"/> -->
                    </view>
                    <view class="em" @tap="chooseEmoji">
                        <u-icon name="/static/emoji_icon_01.png" size="48"></u-icon>
                    </view>
                </view> 
            </view>
            
			
			<!-- 功能性按钮 -->
			<view class=" voice ">
				<u-upload ref="uUpload" :custom-btn="true" :action="action" :show-upload-list="false" max-count="1" :file-list="imgList" @on-success="afterUpload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="/static/tupi.png" size="48" :color="$u.color['lightColor']"></u-icon>
					</view>
				</u-upload>
			    <!-- <u-icon name="/static/ico/yq02.png" size="48" color="#ff6a00"></u-icon> -->
			</view>
			<!-- 发送 按钮-->
			<view @click="sendMsg">
			    <view class="fasong">{{$t('bico.W794')}}</view>
			</view>
        </view>
        <!-- 抽屉栏 -->
        <view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
            <!-- 表情 -->
            <view class="emoji-swiper" :class="{hidden:hideEmoji}">
                <scroll-view scroll-y="true" style="height: 300rpx;">
                    <view class="u-p u-flex u-flex-wrap">
                        <view class="u-m-b-32 emoji-box flex" v-for="(page,pid) in emoji" :key="pid" @tap="clickEmoji(page)">
                            <image mode="widthFix" :src="page.src"></image>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <!-- 更多功能 相册-拍照-红包 -->
            <!-- <view class="more-layer" :class="{hidden:hideMore}">
                <view class="list">
                    <view class="box u-flex-col" v-for="(item, index) in funList" :key="index">
                        <u-icon :name="item.icon" :size="52"></u-icon>
                        <view class="grid-text">{{ item.title }}</view>
                    </view>
                </view>
            </view> -->
        </view>
        <!-- //语音动画 -->
        <view class="voice_an"  v-if="recording">
            <view class="voice_an_icon">
                <view id="one" class="wave"></view>
                <view id="two" class="wave"></view>
                <view id="three" class="wave"></view>
                <view id="four" class="wave"></view>
                <view id="five" class="wave"></view>
                <view id="six" class="wave"></view>
                <view id="seven" class="wave"></view>
            </view>
            <view class="text">{{voiceIconText}}</view>
        </view>
    </view>
</template>

<script>
	import codeStatus from '@/common/codeStatus.js'
	import {websocetObj} from '@/common/socket.js'
	import {domain,sockeUrl,imgUrl} from '@/common/domain.js'
	import {
		getChatList,checkChatPwd,commonChatConfigs,uploadImg
	} from '../../common/apiString.js'
	import emoji from '@/common/emoji4.js'
	import {emojiParser2} from '@/common/emoji3.js'
	import {myMixins} from '@/common/myMixins.js' //加入全局下拉刷新
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
export default {
	mixins: [myMixins],
    data() {
        return {
			emoji,
			action: domain+uploadImg,
			imgList:[],
			token:uni.getStorageSync('token'),
			askStr:'/ask/',
			imgUrl,
            fromUserInfo: {},
            // 抽屉参数
            popupLayerClass:'',
            formData: {
                content: '',
                limit: 15,
                index: 1
            },
            // user_info:{
            //     address: "河南郑州",
            //     // chatBgImg: "/static/1.jpg",
            //     headImg: imgUrl+"/uploads/2022-6/afcbb-c1b3-43ff-b.png",
            //     id: 1,
            //     phone: "13535351112",
            //     pictureBanner: "/static/chat/Ran.jpg",
            //     signature: "who do you want to meet.",
            //     userName: "DR",
            //     wechatNumber: "October"
            // },
            messageList: [

            ],
			isVoice:false,
            loading: true, //标识是否正在获取数据
            imgHeight: '1000px',
            mpInputMargin: false, //适配微信小程序 底部输入框高度被顶起的问题
            chatType:"voice",  // 图标类型 'voice'语音 'keyboard'键盘
            voiceTitle: '按住 说话',
			//voiceIconText: '按住 说话',
            Recorder: uni.getRecorderManager(),
            Audio: uni.createInnerAudioContext(),
            recording: false, //标识是否正在录音
            isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
            voiceInterval:null,
            voiceTime:0, //总共录音时长
            canSend:true, //是否可以发送
            PointY:0, //坐标位置
            voiceIconText:"按住 说话",
            showFunBtn:false, //是否展示功能型按钮
            AudioExam:null, //正在播放音频的实例
            funList: [
                { icon:"photo-fill",title:"照片",uploadType:["album"] },
                { icon:"camera-fill",title:"拍摄",uploadType:["camera"] },
            ],
			scrollSize:0,
			topRange:0,
            // input
            customStyle:{
                padding:'15rpx'
            },
            // more参数
            hideMore:true,
            //表情定义
            hideEmoji:true,


        };
    },
	computed: {
		...mapState({
			theme: state => state.theme
		}),
	},
	onLoad(info) {
		uni.setNavigationBarTitle({
			title: this.$t('bico.W793'),
		})
		this.$utils.setTheme(this.theme);
	     this.joinData()
		 this.connectSocekt()
		 // #ifndef H5 
		 var self=this
		 this.Recorder.onStop(function (res) {
		 	console.log('recorder stop' + JSON.stringify(res));
			self.voicePath = res.tempFilePath
			var param={ tempFilePath:self.voicePath,duration:self.voiceTime }
			self.handleRecorder(param)
			
		 	
		 })
		 // #endif
	},
	beforeDestroy() {
		websocetObj.stop();
		this.Audio.stop();
		// #ifndef H5
		this.Recorder.destroy();
		//#endif
	},
    methods: {
		connectSocekt(){
			websocetObj.sokcet(sockeUrl+this.askStr+this.token,this.onReceive,this.onErrorEvent,this.onErrorSucceed)
		},
		//接收
		onReceive(resp){
			var that=this
			var res = JSON.parse(resp)
			console.log(res.code)
			if(res.code==200){
			  var data = res.data
			  that.messageList.push(that.msgHandle(data,that.messageList.length))
			  if(that.scrollSize>=this.topRange){ //
				  //填充数据后，视图会自动滚动到最上面一层然后瞬间再跳回bindScroll的指定位置 ---体验不是很好，后期优化 ·
				  // that.$nextTick(() => {
				  // 	const sel = `#msg-${that.messageList.length}`;
				  //     that.bindScroll(sel);
				  // 	})


					that.$nextTick(() => {
					    // #ifdef MP-WEIXIN
					        if(params.contentType == 1){
					            uni.pageScrollTo({
					                scrollTop: 99999,
					                duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
					            });
					        }else{
					            setTimeout(()=>{
					                uni.pageScrollTo({
					                    scrollTop: 99999,
					                    duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
					                });
					            },150)
					        }
					    // #endif

					    // #ifndef MP-WEIXIN
					        uni.pageScrollTo({
					            scrollTop: 99999,
					            duration: 100
					        });
					    // #endif

					    if(this.showFunBtn){
					        this.showFunBtn = false;
					    }

					    // #ifdef MP-WEIXIN
					    if (params.contentType == 1) {
					        this.mpInputMargin = true;
					    }
					    // #endif
					    //h5浏览器并没有很好的办法控制键盘一直处于唤起状态 而且会有样式性的问题
					    // #ifdef H5
					    uni.hideKeyboard();
					    // #endif
					});
			  }


			  //that.scrollBottom();

			}else{
			  codeStatus(res.code,function(msg){
			     setTimeout(()=>{
			     	uni.showToast({
			     		icon:'none',
			     		title: msg,
			     	});
			     },100)
			  })
			}

		},
		onErrorEvent(res){

		},
		onErrorSucceed(res){

		},
		socektSend(msg,contentType){
			websocetObj.sendMsg({
				"text": { "text": msg },
				"contentType":contentType,
				})
		},
		afterUpload(data, index, lists, name) {
			this.$refs.uUpload.lists=[]
			if (data.code == 200) {
				//this.$utils.showLayer("发送成功");
				var img = data.data.src
				var title = data.data.title
				var imgStr = "<img data-src='"+domain+img+"' title='"+title+"'/>"
				this.socektSend(imgStr,3)
			} else {
				this.$utils.showLayer(msg);
			}
		},
        test(e){
            console.log(e);
        },
        onEditorReady() {
            uni.createSelectorQuery().select('#editor').context((res) => {
                this.editorCtx = res.context
            }).exec()
        },
        // 打开抽屉
        openDrawer(){
            this.popupLayerClass = 'showLayer';
        },
        // 隐藏抽屉
        hideDrawer(){
            this.popupLayerClass = '';
            setTimeout(()=>{
                this.hideMore = true;
                this.hideEmoji = true;
            },150);
        },
        discard(){
            return;
        },
        //获取焦点，如果不是选表情ing,则关闭抽屉
        textareaFocus(){
            if(this.popupLayerClass=='showLayer' && this.hideMore == false){
                this.hideDrawer();
            }
        },
        //拼接消息 处理滚动
        async joinData() {
			var that=this
            if (!that.loading) {
                //如果没有获取数据 即loading为false时，return 避免用户重复上拉触发加载
                return;
            }
            that.loading = false;
            const data = await that.getMessageData();
            //获取节点信息
            const { index } = that.formData;
			if(data.length>0){
				const sel = `#msg-${data[data.length - 1].hasBeenSentId}`;
				// that.messageList = [...data, ...that.messageList];
				that.messageList = data;
				
				//填充数据后，视图会自动滚动到最上面一层然后瞬间再跳回bindScroll的指定位置 ---体验不是很好，后期优化 ·
				that.$nextTick(() => {
				    that.bindScroll(sel);
				    //如果还有数据
				    if (that.formData.limit >= data.length) {
				        that.formData.index++;
				        setTimeout(() => {
				            that.loading = true;
				            that.loading = false;
				        }, 200);
				    }
				});
			}else{
				
			}
            
        },
        //处理滚动
        bindScroll(sel, duration = 0) {
			var that=this
            const query = uni.createSelectorQuery().in(this);
            query
                .select(sel)
                .boundingClientRect(data => {
					
                    uni.pageScrollTo({
                        scrollTop: data && data.top - 40,
                        duration
                    });
                })
                .exec(
				// (res)=>{
				// 	that.topRange = res[0].top //获取距离顶部的高度并保存
				// 	console.log("data && data.top - 40",that.topRange)
				// }
				);
        },
        //获取消息
        getMessageData() {
            let getData = () => {



            };
            return new Promise((resolve, reject) => {
                var arr=[]
                this.$utils.initDataToken({url:getChatList,type:'post'},(res,msg)=>{
                	for(let i = 0; i < res.length; i++){
                		var item = res[i]
						arr.push(this.msgHandle(item,i));
                	}
					resolve(arr);
                })

            });
        },
		msgHandle(item,i){
			item.text.text=this.emojiParser(item.text.text)
			if(item.contentType =="1"){
				return {
				    hasBeenSentId: i, //已发送过去消息的id
				    content: item.text.text,
					name:item.name,
					date:item.date,
				    mine:item.mine, //true此条信息是我发送的 false别人发送的
				    contentType: item.contentType, // 1文字文本 2语音
					isPlay:false,//是否播放
					img:imgUrl+item.img
				};
			}
			if(item.contentType =="2"){
				var content=JSON.parse(item.text.text)
				content.content = imgUrl+content.content
				return {
					anmitionPlay:false,
				    hasBeenSentId: i, //已发送过去消息的id
				    content: content,
					name:item.name,
					date:item.date,
				    mine:item.mine, //true此条信息是我发送的 false别人发送的
				    contentType: item.contentType, // 1文字文本 2语音
					img:imgUrl+item.img
				};
			}
			if(item.contentType =="3"){
				var fristY = item.text.text.indexOf("'")+1 //即第一个字符.的下标位置
				var secendY = item.text.text.indexOf("'",fristY)//即第二个字符.的下标位置
				return {
				    hasBeenSentId: i, //已发送过去消息的id
					name:item.name,
					date:item.date,
				    content: item.text.text.substring(fristY,secendY),
				    mine:item.mine, //true此条信息是我发送的 false别人发送的
				    contentType: item.contentType, // 1文字文本 2语音
					img:imgUrl+item.img
				};
			}
		},
		emojiParser(str){
			for(var item of emoji){
				if(str.indexOf(item.code)>(-1)){
					str = str.replace(item.code,"<img mode='aspectFit'' style='width:1.625rem;height: 1.625rem;' src='"+item.src+"'/>")
				}
			}
			return str
		},
        //切换语音或者键盘方式
        switchChatType(type) {
            this.chatType = type;
            this.showFunBtn =false;
        },
        //切换功能性按钮
        switchFun(){
            /* this.chatType = 'keyboard'
            this.showFunBtn = !this.showFunBtn;
            this.hideEmoji = false;
            uni.hideKeyboard()*/
            this.hideEmoji = true;
            if(this.hideMore){
                this.hideMore = false;
                this.openDrawer();
            }else{
                this.hideDrawer();
            }
        },
        // 点击选择表情
        chooseEmoji(){
            this.hideMore = true;
            if(this.hideEmoji){
                this.hideEmoji = false;
                this.openDrawer();
            }else{
                this.hideDrawer();
            }
        },
        //发送消息
        sendMsg(data) {
			var that=this
			that.editorCtx.getContents({
				success: function(res){
					var data = res.html
					if(data=='<p><br></p>'){
						//console.log(res)
						return
					}
					//console.log(data)
					that.socektSend(res.html,1)
					that.editorCtx.clear({
					      success: function(res) {
					        console.log("清空成功")
							that.hideDrawer()
					      }
					    })
					//console.log(res.html)
				},
			})
        },
        //用户触摸屏幕的时候隐藏键盘、更多功能、表情
        touchstart() {
            uni.hideKeyboard();
            this.hideEmoji = false;
            this.showFunBtn = false;
            this.hideDrawer();  // 关闭抽屉
        },

        //添加表情
        clickEmoji(page){
            // '/static/img/emoji/'+page.url
            // this.formData.content += page.alt;
            this.editorCtx.insertImage({
                src: page.src,
                // alt: page.code,
                width:20,
                height:20,
                extClass:'emojiIamge',
                success: function() {
                    console.log('insert image success')
                }
            })


        },
        //获取焦点，如果不是选表情ing,则关闭抽屉
        /*textareaFocus(){
            this.hideEmoji = false;
            this.showFunBtn = false;
        },*/
        //点击宫格时触发
        clickGrid(index){
            if(index == 0){
                this.chooseImage(['album'])
            }else if(index == 1){
                this.chooseImage(['camera'])
            }
        },
        //发送图片
        chooseImage(sourceType){
            uni.chooseImage({
                sourceType,
                sizeType:['compressed'],
                success:res=>{
                    this.showFunBtn = false;
                    for(let i = 0;i<res.tempFilePaths.length;i++){
                        const params = {
                            contentType: 3,
                            content: res.tempFilePaths[i],
                        };
                        this.sendMsg(params)
                    }
                }
            })
        },
        //查看大图
        viewImg(imgList){
            uni.previewImage({
                urls: imgList,
                // #ifndef MP-WEIXIN
                indicator: 'number'
                // #endif
            });
        },
		//准备开始录音
		startVoice(e) {
		    console.log('准备开始录音');
		    if(!this.Audio.paused){
		        //如果音频正在播放 先暂停。
		        this.stopAudio(this.AudioExam)
		    }
		    this.recording = true;
		    this.isStopVoice = false;
		    this.canSend = true;
		    this.voiceIconText = "上滑取消..."
		    this.PointY = e.touches[0].clientY;
		    this.Recorder.start({
		        format: 'mp3'
		    })
			this.beginVoice();
		},
		//录音已经开始
		beginVoice(){
			var that=this
		    console.log('录音已经开始');
		    if (this.isStopVoice) {
		        this.Recorder.stop();
		        return;
		    }
		    this.voiceIconText = '松开 结束'
		    that.voiceInterval =  setInterval(()=>{
		        that.voiceTime ++;
				console.log("录制时间",that.voiceTime)
		    },1000)
		},
		//move 正在录音中
		moveVoice(e){
		                console.log('正在录音中');
		    const PointY = e.touches[0].clientY
		    const slideY = this.PointY - PointY;
		    if(slideY > uni.upx2px(120)){
		        this.canSend = false;
		        this.voiceIconText = '松开手指 取消发送 '
		    }else if(slideY > uni.upx2px(60)){
		        this.canSend = true;
		        this.voiceIconText = '手指上滑 取消发送 '
		    }else{
		        this.voiceIconText = '正在录音... '
		    }
		},
		//结束录音
		endVoice() {
		    console.log('结束录音');
		    this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
		    this.Recorder.stop();
			// 下载wav文件
			//var i = this.Recorder.downloadWAV();
			//console.log(i)
		    this.recording = false;
			// this.voiceIconText= '按住 说话',
		    this.voiceIconText = '按住 说话'
			clearInterval(this.voiceInterval)
		},
		//录音被打断
		cancelVoice(e){
		                console.log('录音被打断');
		    this.voiceTime = 0;
		    this.voiceIconText = '按住 说话';
		    this.canSend = false;
		    this.recording = false;
		    this.Recorder.stop();
			clearInterval(this.voiceInterval)
		},
		//处理录音文件
		handleRecorder({ tempFilePath,duration }) {
		    let contentDuration;
			console.log("this.voiceTime ",this.voiceTime )
		    // #ifdef MP-WEIXIN
			console.log("MP-WEIXIN",this.voiceTime )
		    this.voiceTime = 0;
		    if (duration < 600) {
				this.$utils.showLayer("说话时间过短")
		        // this.voiceIconText="说话时间过短";
		        setTimeout(()=>{
		            this.recording = false;
		        },200)
		        return;
		    } 
		    contentDuration = duration/1000;
		    // #endif
		    // #ifdef APP-PLUS
			console.log("APP-PLUS ",this.voiceTime )
		    contentDuration = this.voiceTime +1;
		    this.voiceTime = 0;
		    if(contentDuration <= 0) {
				this.$utils.showLayer("说话时间过短")
		        // this.voiceIconText="说话时间过短";
		        setTimeout(()=>{
		            this.recording = false;
		        },200)
		        return;
		    };
		    // #endif
			
		    
		    this.recording = false;
		    const params = {
		        contentType: 2,
		        content: tempFilePath,
		        contentDuration: Math.ceil(contentDuration)
		    };
			if(params.contentDuration>60){
				this.$utils.showLayer("语音不能超过60秒")
				return
			}
			// this.Audio.src = params.content;
			// this.Audio.hasBeenSentId = item.hasBeenSentId;
			// this.Audio.play();
		    this.canSend && this.sendVoice(params);
		},
		sendVoice(params){
			uni.uploadFile({
			    url: this.action,
			    filePath: params.content,
			    name: 'file',
			    success: (res) => {
					var resData = JSON.parse(res.data)
					if(resData.code==200){
						params.content = resData.data.src
						this.socektSend(JSON.stringify(params),params.contentType)
					}
					console.log('recorder stop' + JSON.stringify(res.data));
					console.log(res)
			    
			    },
			    fail: (err) => {
			        //uni.hideLoading();
			        uni.showToast({
			            tilte: '发送失败~',
			            icon: 'none',
			            duration: 1200
			        })
			            return
			        }
			    });
			  //else {
			//     console.log("录音失败")
			//     uni.showToast({
			//         tilte: '录音失败',
			//         icon: 'none',
			//         duration: 1200
			//     })
			    //uni.hideLoading();
			    //this.show_recording = false;
			    //this.checkPermission()
			    //this.rerecord()
			
		},
		//控制播放还是暂停音频文件
		handleAudio(item) {
			console.log(item)
			var that = this
		    
			if(this.Audio.paused){
				this.AudioExam = item;
				this.playAudio(item)
				this.Audio.onEnded(() => {
				        //播放结束
				        that.stopAudio(item)
						console.log("播放结束",item)
				        for (var value of that.messageList) {
				        	if(value.hasBeenSentId>item.hasBeenSentId && value.contentType == 2 &&!value.mine && !value.isPlay){
								that.Audio.paused ?that.handleAudio(value):"";
				        	}
				        }
				    });
			}else{
				if(this.AudioExam)this.AudioExam.anmitionPlay=false
				this.stopAudio(this.AudioExam)
				if(this.AudioExam.hasBeenSentId != item.hasBeenSentId){
					that.handleAudio(item)
				}
			}
		},
		//播放音频
		playAudio(item) {
		    this.Audio.src = item.content.content;
		    this.Audio.hasBeenSentId = item.hasBeenSentId;
		    this.Audio.play();
			item.isPlay=true
		    item.anmitionPlay = true;
		},
		//停止音频
		stopAudio(item) {
			//setTimeout(()=>{
			   item.anmitionPlay = false;
			//},250) 
		    this.Audio.src = '';
		    this.Audio.stop();
		},
    },
    onPageScroll(e) {
		// debugger
		
		this.scrollSize = e.scrollTop
		if(this.topRange==0 ||this.scrollSize-this.topRange>=100){
			this.topRange=e.scrollTop
			console.log("this.topRange",this.topRange)
		}
		console.log( e.scrollTop)
    },
    onNavigationBarButtonTap() {
        //返回按钮
        this.$u.route({
            type: 'switchTab',
            url: 'pages/news/news'
        });
    },
    //返回按钮事件
    // onBackPress(e) {
    //     //以下内容对h5不生效
    //     //--所以如果用浏览器自带的返回按钮进行返回的时候页面不会重定向 正在寻找合适的解决方案
    //     this.$u.route({
    //         type: 'switchTab',
    //         url: 'pages/news/news'
    //     });
    //     return true;
    // },

    onReady() {
        //自定义返回按钮 因为原生的返回按钮不可阻止默认事件
        // #ifdef H5
        const icon = document.getElementsByClassName('uni-page-head-btn')[0];
        // console.log(icon);
        //icon.style.display = 'none';
        // #endif
        // 动态设置当前页面的标题。
        // uni.setNavigationBarTitle({
        //     title: '咨询'
        // });
        uni.setNavigationBarTitle({
            title: this.$t('bico.W793'),
        });

    }
};
</script>

<style lang="scss" scoped>
 page {
    background-color: #f3f3f3;
}
.hidden{
    display: none !important;
}
.content {
    &-showfn{
        padding-bottom: 0rpx;
        padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(420rpx + env(safe-area-inset-bottom) );
        /* #ifdef MP-WEIXIN */
        /* #endif */
    }
    &-box {
        width: 100%;
        height: auto;
        min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
        box-sizing: content-box;
        position: relative;
        padding-bottom: 120rpx;

        /* #ifdef APP-PLUS  */
        margin-bottom: 0rpx;
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        /* #endif */
        /* #ifdef MP-WEIXIN */
        padding-bottom: 0rpx;
        padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(120rpx + env(safe-area-inset-bottom) );
        /* #endif */

        &-bg {
            width: 100%;
            position: fixed;
            /* #ifdef MP-WEIXIN */
            bottom: 0;
            bottom: constant(safe-area-inset-bottom);
            bottom: env(safe-area-inset-bottom);
            /* #endif */
            /* #ifndef MP-WEIXIN */
            top: 0;
            left: 0;
            /* #endif */
        }

        &-loading {
            text-align: center;
            padding: 20rpx 0;
        }

        .message {
            padding: 14px 10px;
        }

        .message-item {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
            flex-wrap: nowrap;
            flex-direction: row;

            .img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 40rpx;
            }

            .content {
                padding: 20rpx;
                max-width: 500rpx;
                border-radius: 10rpx;
                font-size: 28rpx;
            }

            // 语音
            .contentType2 {
                display: flex;
                flex-direction: row;
                align-items: center;
                .voice_icon {
                    height: 34rpx;
                    width: 34rpx;
                    background-repeat: no-repeat;
                    background-size: 100%;
                }
                .voice_icon_right {
                    background-image: url(../../static/chat/voice-left-3.png);
                    margin-left: 10rpx;
                }
                .voice_icon_left {
                    background-image: url(../../static/chat/voice-right-3.png);
                    margin-right: 10rpx;
                }
                .voice_icon_right_an {
                    animation: voiceAn_right 1s linear alternate infinite;
                }
                .voice_icon_left_an {
                    animation: voiceAn_left 1s linear alternate infinite;
                }
                @keyframes voiceAn_right {
                    0% {
                        background-image: url(../../static/chat/voice-left-1.png);
                    }
                    50% {
                        background-image: url(../../static/chat/voice-left-2.png);
                    }
                    100% {
                        background-image: url(../../static/chat/voice-left-3.png);
                    }
                }
                @keyframes voiceAn_left {
                    0% {
                        background-image: url(../../static/chat/voice-right-1.png);
                    }
                    50% {
                        background-image: url(../../static/chat/voice-right-2.png);
                    }
                    100% {
                        background-image: url(../../static/chat/voice-right-3.png);
                    }
                }
            }

            //图片
            .contentType3{
                padding: 0;
                border-radius: 2rpx;
                background-color: transparent !important;
                .img{
                    width: 200rpx;
                    height: auto;
                    max-width: 300rpx;
                    max-height: 400rpx;
                }
            }
            .contentType3::after{
                border: none !important;
                display: none !important;
            }
            .content-type-right {
                flex-direction: row-reverse;
            }

            &.right {
                flex-direction: row-reverse;

                .content {
                    background-color: $uni-color-success;
                    margin-right: 28rpx;
                    word-break: break-all;
                    line-height: 36rpx;
                    position: relative;

                    &::after {
                        content: '';
                        display: block;
                        width: 0;
                        height: 0;
                        border-top: 10rpx solid transparent;
                        border-bottom: 10rpx solid transparent;
                        border-left: 16rpx solid $uni-color-success;
                        position: absolute;
                        right: -16rpx;
                        top: 30rpx;
                    }
                }
            }
	
            &.left {
                .content {
                    background-color: $uni-text-color-inverse;
                    margin-left: 28rpx;
                    word-break: break-all;
                    line-height: 36rpx;
                    position: relative;

                    &::after {
                        content: '';
                        display: block;
                        width: 0;
                        height: 0;
                        border-top: 10rpx solid transparent;
                        border-bottom: 10rpx solid transparent;
                        border-right: 16rpx solid $uni-text-color-inverse;
                        position: absolute;
                        left: -16rpx;
                        top: 30rpx;
                    }
					
                }
            }
        }
    }

    .input-box2{
        width: 100%;
        min-height: 100rpx;
        padding: 0 4%;
        background-color: #fff;
        display: flex;
        position: fixed;
        z-index: 20;
        bottom:-2rpx;
        &.showLayer{transform: translate3d(0,-42vw,0);}
        transition: all .15s linear;
        border-bottom: solid 1upx #ddd;
        .voice,.more{
            flex-shrink: 0;
            width: 90upx;
            height: 100upx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .textbox{
            width: 100%;
            min-height: 64rpx;
            margin-top: 15rpx;
            padding-bottom: 15rpx;
            .voice-mode{
                width: calc(100% - 2upx);
                height: 64rpx;
                border-radius: 70rpx;
                border:solid 1rpx #cdcdcd;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                background-color: #fff;
                color: #555;
                &.recording{
                    background-color: #e5e5e5;
                }
            }
            .text-mode{
                width: 100%;
                min-height: 30px;
                display: flex;
                background-color: #f7f7f7;
                box-shadow: 0 -0.5px 0.5px rgba(0, 0, 0, 0);
                border-radius: 8px;
                .box{
                    width: 100%;
                    // padding-left: 30rpx;
                    min-height: 64rpx;
                    border-radius: 32rpx;
                    // padding-bottom: 15rpx;
                    display: flex;
                    align-items: center;
                    textarea{
                        width: 100%;
                    }
                    .ql-container {
                        box-sizing: border-box;
                        padding: 15rpx;
                        padding-right: 0;
                        width: 100%;
                        min-height: 30rpx;
                        height: 100%;
                        // margin-top: 20rpx;
                        font-size: 28rpx;
                        // line-height: 1.5;

                    }
                }
                .em{
                    flex-shrink: 0;
                    width: 80upx;
                    padding-left: 10upx;
                    height: 70upx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

    }
    .emojiIamge {
        margin: 10rpx;
    }
    .popup-layer{
        &.showLayer{transform: translate3d(0,-42vw,0);}
        transition: all .15s linear;
        width: 100%;
        height: 42vw;
        padding: 20rpx 2%;
        background-color: #fff;
        border-top: solid 1upx #ddd;
        position: fixed;
        z-index: 20;
        top: 100%;
        .emoji-swiper{
            height: 40vw;
            .emoji-box {
                width: 12.5%;
                height: 54rpx;
                image{
                    width: 54rpx;
                    height: 54rpx;
                }
            }
        }
        .more-layer{
            width: 100%;
            height: 42vw;
            .list{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .box{
                    /* width: 18vw;
                    height: 18vw; */
                    background-color: #fff;
                    margin: 0 3vw 2vw 3vw;
                    .icon{
                        font-size: 70upx;
                    }
                }
            }
        }
    }
    .input-box-mpInputMargin {
        /* #ifdef MP-WEIXIN */
        padding-bottom: 0rpx;
        /* #endif */
    }
    .voice_an{
        width: 300rpx;
        height: 300rpx;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-55%);
        background-color: rgba(41,41,41,0.7);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-radius: 10rpx;
        .text{
            padding-top: 30rpx;
        }
        @keyframes runVoice{
            0%{
                height: 10%;
            }
            20%{
                height: 50%;
            }
            50%{
                height: 100%;
            }
            80%{
                height: 50%;
            }
            100%{
                height: 0%;
            }
        }
        .wave{
            width:6rpx;
            height: 100%;
            margin-left: 10rpx;
            border-radius: 50rpx;
            background-color: #999;
            vertical-align: middle;
            display: inline-block;
        }
        .voice_an_icon{
            width: 200rpx;
            height: 100rpx;
            line-height: 50rpx;
            margin: 50rpx 0;
        }
        .voice_an_icon #one{
            animation:runVoice 0.6s infinite 0.1s;
        }
        .voice_an_icon #two{
            animation:runVoice 0.6s infinite 0.3s;
        }
        .voice_an_icon #three{
            animation:runVoice 0.6s infinite 0.6s;
        }
        .voice_an_icon #four{
            animation:runVoice 0.6s infinite 0.1s;
        }
        .voice_an_icon #five{
            animation:runVoice 0.6s infinite 0.3s;
        }
        .voice_an_icon #six{
            animation:runVoice 0.6s infinite 0.6s;
        }
        .voice_an_icon #seven{
            animation:runVoice 0.6s infinite 0.1s;
        }

    }
	.itemright{
		margin-top: 0px !important;
		padding: 0px 44px 0px;
		text-align: center;
		color: #E91E63;
		line-height: 0px;
		font-size: 14px;
	}
	.fasong{
		font-weight: 400;
		color: #fff;
		width: 64px;
		height: 30px;
		line-height: 30px;
		border-radius: 4px;
		text-align: center;
		padding: 0;
		font-size: 14px;
		background-color: #0080ff;
		bottom: -10px;
		position: relative;
	}
	
	.content-box .message-item.right .content {
	    background-color: #e4e4e4!important;
	    margin-right: 14px;
	    word-break: break-all;
	    line-height: 18px;
	    position: relative;
	}
	
	.content-box .message-item.right .content::after {
	    content: '';
	    display: block;
	    width: 0;
	    height: 0;
	    border-top: 5px solid transparent;
	    border-bottom: 5px solid transparent;
	    border-left: 8px solid #e4e4e4!important;
	    position: absolute;
	    right: -8px;
	    top: 15px;
	}
	

	

}

</style>
